/* 左右 */
.x{
	display: flex;
}
/* 上下 */
.y{
	display: flex;
	flex-direction: column;
}
body{
	margin: 0;
}
.div1{
	
	color: white;
	font-size: 12px;
	padding: 10px 0;
	width: 70%;
	justify-content: flex-end;
}
.div1>div{
	margin: 0 10px;
}
.div2{
	background-color: red;
	justify-content: center;
}
.w70{
	width: 70vw;

}
.div3{
	justify-content: center;
}
.div4>img{
	width: 20px;
	height: 20px;
}
.div4{
	border-bottom: 1px solid #eee;/* 下边框 */
	padding: 5px 0;/* 上下内边距 */
}
.div5{
	align-items: center;/* 上下居中 */
}
.div5>div{
	flex:1;/* 均匀分布剩余部分 */
	text-align: center;/* wen */
}
input{
	/* 显示的时候去掉黑框 */
	border: none;
	/* 点击的时候去掉黑框 */
	outline: none;
	
}
.div6{
	width: 210vw;
	/* 轮播图引入动画   identifier是动画名称  10s是完成一个周期10秒  infinite无限循环 */
	animation: identifier 10s infinite; 
}
.div6>img{
	width: 70vw;
}
.div7{
	width: 70vw;
	overflow: hidden;
}
@keyframes identifier { /*identifier 动画名*/
	10%,30%{	/* 表示在动画周期10%到30%的时候完成平移 */
		transform: translateX(0);
	}
	40%,60%{/* 表示在动画周期40%到60%的时候完成平移 */
		transform: translateX(-70vw);
	}
	70%,90%{/* 表示在动画周期70%到90%的时候完成平移 */
		transform: translateX(-140vw);
	}
}
.div8{
	flex:1/*把查看更多挤到右边*/
}
.div9{
	font-size: 40px;
	margin-right: 30px;
}
.div10{
	align-items: baseline;/*文字底部对齐*/
}
.div11{
	width: 25%;/*每行4个*/
	align-items: center;/*元素左右居中*/
}
.div11>img{
	width: 98%;/*98是为了留2%的缝隙*/
}
.div12{
	flex-wrap: wrap;/*换行*/
}
.div13{
	background-color: orangered;
	color: white;
}
.div14{
	align-items: center;
}
.div15{
	justify-content: space-around;/*均匀分布*/
	padding: 50px 0;
}